<template>
  <div class="table-out" v-for="(item, index) in arrs" :key="index">
    <div class="biao-1">{{ item.name }}:</div>
    <div
      class="tetle-1"
      v-for="(items, indexs) in item.collegeList"
      :key="indexs"
      :class="item.activeIndex === indexs ? 'active' : ''"
      @click="activadd(index, items, indexs)"
    >
      {{ items.label }}
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps<{
  arrs?: any
}>()
const emits = defineEmits<{
  (e: 'activadd', index: any, val: any, indexs: number): void
}>()
const activadd = (index: any, val: any, indexs: number) => {
  emits('activadd', index, val, indexs)
}
</script>

<style lang="scss" scoped>
.table-out {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.biao-1 {
  font-weight: 400;
  font-size: 14px;
  color: #2f3133;
  margin-right: 12px;
}
.tetle-1 {
  min-width: 52px;
  height: 30px;
  padding: 4px 12px;
  font-size: 14px;
  color: #2f3133;
  border-radius: 4px;
  margin-right: 12px;
  cursor: pointer;
}
.active {
  color: #0f63ed;
  background: #dbe4fb;
  border-radius: 4px;
}
</style>
